<template>
  <div>
    <label class="label-radio" v-tap="{methods: touch}" style="display: flex;justify-content: space-around;">
      <!-- 自定义样式 -->
      <div style="position:relative">
        <input type="radio" :value="nativeValue" v-model="inputValue" class="input-radio">
        <!-- 选中 -->
        <div class="custom-icon" :class="iconClass">
          <img :src="checkIcon" class="check-icon icon">
          <!-- 未选中 -->
          <img :src="uncheckIcon" class="uncheck-icon icon">
        </div>
      </div>
      <div class="mu-radio-label" :class="labelClass" v-if="label">{{label}}</div>
    </label>
  </div>
</template>

<script>
/**
 * 自定义radio
 * @param value           v-model
 * @param nativeValue     该input被选中时, 赋给v-model的值
 * @param label           label
 */
import checkIcon from "assets/check.svg";
import uncheckIcon from "assets/uncheck.svg";
export default {
  name: "icar-radio",
  props: {
    value: {
      type: [String, Number, Boolean]
    },
    nativeValue: {
      type: [String, Number]
    },
    label: {
      type: String,
      default: ""
    },
    labelClass: {
      type: String,
      default: ""
    },
    iconClass: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      inputValue: this.value,
      checkIcon,
      uncheckIcon
    };
  },
  watch: {
    value(val) {
      this.inputValue = val;
    },
    inputValue(val) {
      this.$emit("input", val);
    }
  },
  methods: {
    touch() {
      if (this.type == "single") {
        if (this.inputValue === this.nativeValue) {
          this.inputValue = null
        } else {
          this.inputValue = this.nativeValue
        }
      } else {
        this.inputValue = this.nativeValue;
      }
    },
    handleChange() {
      this.$emit("change", this.inputValue);
    }
  }
};
</script>

<style lang="scss" scoped>
.label-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input-radio {
  display: none;
  &:checked {
    + .custom-icon {
      .check-icon {
        transform: scale(1);
      }
      .uncheck-icon {
        transform: scale(0);
      }
    }
  }
}
.custom-icon {
  display: inline-block;
  width: 45px;
  height: 25px;
}
.icon {
  position: absolute;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1);
  &.check-icon {
    transform: scale(0);
  }
  &.uncheck-icon {
    transform: scale(1);
  }
}
</style>
